<h1>Frequently Asked Questions</h1>

<div class="faq-list">
<div class="faq-item">
    <div class="faq-question">
        What is Trongate MX?
        <div class="toggle-icon"></div>
    </div>
    <div class="faq-answer">
        <p><b>Trongate MX</b> is a powerful front-end framework that turns simple HTML attributes into sophisticated web functionality. It's designed specifically for the Trongate PHP framework, allowing you to create dynamic, interactive web applications without writing JavaScript code.</p>
        <p>Think of it as your bridge between static HTML and modern web applications. By adding straightforward attributes to your HTML elements, you can handle form submissions, update content dynamically, trigger success and error animations, manage modals, implement authentication, and create rich user experiences - all while maintaining clean, maintainable HTML code.</p>
    </div>
</div>

<div class="faq-item">
    <div class="faq-question">
      Why was Trongate MX built?
      <div class="toggle-icon"></div>
    </div>
    <div class="faq-answer">

        <p>In today's fast-paced world of web development, there is an increasing demand for web applications to deliver the responsiveness and fluidity typically seen in native software.</p> <p>Before the introduction of Trongate MX, PHP developers faced a tough choice: they could either:</p> <ol> <li>Ignore modern front-end development trends.</li> <li>Master a complex JavaScript framework.</li> <li>Write large amounts of custom JavaScript code.</li> </ol> <p>None of these options were ideal.</p>

      <p>Trongate MX was built to solve this challenge.  With Trongate MX, developers can produce sophisticated, dynamic front-end interactions without having to write <i>any</i> JavaScript code!</p>


    </div>
  </div>

<div class="faq-item">
  <div class="faq-question">
    What technical problem does Trongate MX solve?
    <div class="toggle-icon"></div>
  </div>
  <div class="faq-answer">
    <p>The Trongate <b><i>PHP framework</i></b> is written in PHP, a server-side technology. Unfortunately, PHP frameworks have limitations when it comes to supporting sophisticated front-end web development tasks, primarily due to their server-side nature.</p>
    <p><b>Trongate MX</b> solves this by enabling the creation of real-time, dynamic web experiences without relying on heavy JavaScript frameworks or excessive custom JavaScript code. With Trongate MX, you can:</p>
    <ul>
      <li>Create modern, interactive applications <i>without</i> writing JavaScript code.</li>
      <li>Save time and avoid headaches from extensive front-end development.</li>
      <li>Bypass the complexities, bloat, and rewrite culture that are an unfortunate norm for developers who have to work with large JavaScript frameworks.</li>
    </ul>
    <p>In short, it lets you deliver cutting-edge front-end functionality while keeping your codebase clean and efficient.</p>
  </div>
</div>

<div class="faq-item">
  <div class="faq-question">
    How does Trongate MX fit into the broader Trongate ecosystem?
    <div class="toggle-icon"></div>
  </div>
  <div class="faq-answer">
    <p>Trongate MX is a <i>game changer</i> for both Trongate developers and also for the makers of Trongate.</p>
    <p class="mt-2"><b>FOR DEVELOPERS</b></p>
    <p>The addition of Trongate MX changes "Trongate" from a PHP framework to a cohesive ecosystem for building modern web applications. The idea of having a complete modern web development suite that has <b>no third-party dependencies</b> and <b>prioritises stability</b> is a rarity. It might even be an industry first!</p>
    <p class="mt-2"><b>FOR THE MAKERS OF TRONGATE</b></p>
    
    <p>Trongate MX gives the makers of Trongate an opportunity to push the boundaries of what's possible for the Trongate ecosystem.  The plan, moving forward, is to use Trongate MX to build an exciting assortment of intellectual assets that other PHP frameworks simply <i>cannot</i> offer.</p>
  </div>
</div>




   

  <div class="faq-item">
    <div class="faq-question">
      Is Trongate MX open-source?
      <div class="toggle-icon"></div>
    </div>
    <div class="faq-answer">
      <p>Absolutely! Trongate MX is fully open-source and released under the MIT License. You're free to use it in personal and commercial projects alike.</p>
    </div>
  </div>

  <div class="faq-item">
    <div class="faq-question">
      Can I use Trongate MX without using the Trongate (PHP) framework?
      <div class="toggle-icon"></div>
    </div>
    <div class="faq-answer">
      <p>Yes, you can. Technically, all you need is to include the Trongate MX JavaScript file on your web pages, and you're good to go.</p>
      <p>However, using it without the Trongate PHP framework means missing out on features like; dynamic modal building, token authorisation, CSRF protection, advanced animations and more.</p>
    </div>
  </div>

  <div class="faq-item">
      <div class="faq-question">
          Are there any plans for additional features in future versions?
          <div class="toggle-icon"></div>
      </div>
      <div class="faq-answer">

        <p>Like the Trongate PHP framework, Trongate MX will be subjected to ongoing, continuous improvement. However, adding more features to Trongate MX is <i>not</i> the primary focus for the makers of Trongate.</p>

        <p>Moving forward, the focus will be on creating groundbreaking tools <i>using</i> Trongate MX. For example, work has already begun on an exciting new content management system (built using Trongate MX), scheduled for release in the spring of 2025.</p>

        <p>When that's ready, it'll be shipped with Trongate - free of charge.</p>
      
      </div>
  </div>

  <div class="faq-item">
    <div class="faq-question">
      How can I contribute to the development of Trongate MX?
      <div class="toggle-icon"></div>
    </div>
    <div class="faq-answer">
      <p>Since Trongate MX is bundled with the Trongate framework, any contributions to the ecosystem are welcome. Feel free to submit a pull request via our GitHub repository:</p>
      <p><a href="https://github.com/trongate/trongate-framework" target="_blank">https://github.com/trongate/trongate-framework</a></p>
    </div>
  </div>
</div>


<style>


  .faq-item {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
  }

  .faq-question {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .faq-answer {
    color: #4b5563;
    display: none;
    padding-top: 0.5rem;
  }

  .faq-answer p {
    margin-bottom: 1em;
  }

  .faq-answer h4 {
    margin-bottom: 1em;
  }

  .faq-answer ol,
  .faq-answer ul {
    width: 76%;
    margin: 1em auto;
  }

  .faq-item.active .faq-answer {
    display: block;
  }

  .toggle-icon {
    width: 20px;
    height: 20px;
    position: relative;
  }

  .toggle-icon::before,
  .toggle-icon::after {
    content: '';
    position: absolute;
    background-color: var(--primary);
    transition: transform 0.3s ease;
  }

  .toggle-icon::before {
    width: 2px;
    height: 20px;
    left: 9px;
    top: 0;
  }

  .toggle-icon::after {
    width: 20px;
    height: 2px;
    left: 0;
    top: 9px;
  }

  .faq-item.active .toggle-icon::before {
    transform: rotate(90deg);
  }
</style>

<script>
  document.querySelectorAll('.faq-question').forEach(question => {
    question.addEventListener('click', () => {
      const faqItem = question.parentElement;
      const isActive = faqItem.classList.contains('active');
      
      // Close all FAQ items
      document.querySelectorAll('.faq-item').forEach(item => {
        item.classList.remove('active');
      });
      
      // Toggle clicked item
      if (!isActive) {
        faqItem.classList.add('active');
      }
    });
  });
</script>